<template>
	<view class="main animated fadeIn faster">
		<view class="content position-fixed z-index-100" :style="{'paddingTop':$store.state.statusBarHeight+'px'}">
			<view class="title">
				<view class="goback" @click="goback">
					<image src="../../static/组 2457.png"></image>
				</view>
				<text>我的钱包</text>
			</view>
		</view>
		<view class="commonBox">
			<view class="balance mt-200">
				<view class="title">我的余额</view>
				<view class="bottom">
					<view class="goldicon">
						<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E7%BB%84%203402.png"></image>
					</view>
					<view class="Experience">
						<view class="val"><text>1.46</text>经验值</view>
						<view class="desc">用于在消息/动态打赏等场景消费</view>
					</view>
					<view class="btn">充值</view>
				</view>
			</view>
		</view>
		<view class="commonBox incom_commonBox">
			<view class="balance">
				<view class="title">我的收入</view>
				<view class="bottom" v-for="i in 4">
					<view class="income_icon">
						<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E7%BB%84%203402.png"></image>
					</view>
					<view class="common_list">
						<view class="val">
							<text>0.18</text>
							<view class="tit">礼物收入</view>
						</view>
						<view class="arr_icon">
							<image src="../../static/组 2457.png" mode=""></image>
						</view>
					</view>
				</view>
				<view class="bottom">
					<view class="income_icon">
						<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E7%BB%84%203402.png"></image>
					</view>
					<view class="common_list">
						<view class="val">
							<text>157</text>
							<view class="tit">陪玩收入</view>
						</view>
						<view class="arr_icon">
							<image src="../../static/组 2457.png" mode=""></image>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="commonBox coupon_commonBox">
			<view class="balance">
				<view class="title">我的优惠券</view>
				<view class="bottom">
					<view class="income_icon">
						<image src="../../static/images/logo.png"></image>
					</view>
					<view class="common_list">
						<view class="val">
							<text>0</text>
							<view class="tit">优惠券</view>
						</view>
					</view>
				</view>
			</view>
			<view class="GrabOrdersBtn">
				<view class="head_portrait">
					<image src="../../static/images/logo.png"></image>
					<view class="b_img">
						<image src="../../static/images/logo.png"></image>
					</view>
				</view>
				<view class="txt">7位大神抢单了</view>
				<view class="arr_icon">
					<image src="../../static/组 2457.png" mode=""></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import store from '@/store/index.js';
	export default {
		data() {
			return {
				ctype:0,
			}
		},
		methods: {
			changType(type){
				this.ctype = type
			},
			goback() {
				uni.navigateBack({
					delta: 1
				});
			}
		}
	}
</script>

<style scoped lang="scss">
.main {
	background: #fff;
	overflow: hidden;
	.content {
		width: 100%;
		background-color: #fff !important;
	}
	.commonBox {
		width: 710rpx;
		background-color: #f5f5f5;
		margin: 30rpx auto;
		border-radius: 20rpx;
		box-sizing: border-box;
		padding: 0 20rpx 40rpx 35rpx;
		.balance {
			overflow: hidden;
			.title {
				color: #231815;
				font-size: 34rpx;
				font-weight: 700;
				margin-top: 12rpx;
			}
			.bottom {
				display: flex;
				justify-content: space-around;
				align-items: center;
				height: 100rpx;
				margin-bottom: 50rpx;
				.goldicon {
					margin: 10rpx 40rpx 0 10rpx;
					image {
						width: 80rpx;
						height: 80rpx;
						border-radius: 50%;
					}
				}
				.income_icon {
					margin: 0rpx 40rpx 0 20rpx;
					image {
						width: 70rpx;
						height: 70rpx;
						border-radius: 50%;
					}
				}
				.Experience {
					display: flex;
					flex: 1;
					flex-direction: column;
					.val {
						font-weight: 700;
						text {
							font-size: 44rpx;
							margin-right: 8rpx;
						}
					}
					.desc {
						margin-top: 14rpx;
						color: #595757;
						font-size: 24rpx;
					}
				}
				.common_list {
					display: flex;
					flex: 1;
					align-items: center;
					height: 80rpx;
					.val {
						font-weight: 700;
						display: flex;
						align-items: flex-end;
						flex: 1;
						text {
							display: block;
							width: 92rpx;
							font-size: 44rpx;
							margin-right: 8rpx;
						}
						.tit {
							margin-bottom: 6rpx;
						}
					}
					.arr_icon {
						display: flex;
						justify-content: center;
						margin-right: 10rpx;
						image {
							transform: rotate(180deg);
							width: 10rpx;
							height: 20rpx;
						}
					}
				}
				.btn {
					text-align: center;
					height: 68rpx;
					line-height: 68rpx;
					padding: 0 46rpx;
					border-radius: 50rpx;
					background: linear-gradient( 90deg, #ED65CE 0%, #E966CF 2%, #859BF0 69%, #5DB0FE 99%);
					color: #fff;
				}
			}
		}
	}
	.coupon_commonBox {
		position: relative;
		margin-bottom: 50rpx;
		.balance {
			.bottom {
				.common_list {
					.val {
						display: flex;
						align-items: center;
						text {
							width: auto;
						}
						.tit {
							margin-top: 6rpx;
						}
					}
				}
			}
		}
		.GrabOrdersBtn {
			position: absolute;
			bottom: 30rpx;
			right: 20rpx;
			display: flex;
			align-items: center;
			text-align: center;
			height: 78rpx;
			line-height: 78rpx;
			border-radius: 50rpx;
			background: linear-gradient( 90deg, #ED65CE 0%, #E966CF 2%, #859BF0 69%, #5DB0FE 99%);
			color: #fff;
			font-size: 24rpx;
			.head_portrait {
				position: relative;
				z-index: 2;
				display: flex;
				justify-content: center;
				padding: 0 20rpx 0 45rpx;
				image {
					width: 50rpx;
					height: 50rpx;
					border-radius: 50%;
				}
				.b_img {
					position: absolute;
					top: -26rpx;
					left: 20rpx;
				}
			}
			.txt {
				flex: 1;
			}
			.arr_icon {
				display: flex;
				align-items: center;
				margin: 0 15rpx 0 20rpx;
				image {
					width: 10rpx;
					height: 10rpx;
					transform: rotate(180deg);
				}
			}
		}
	}
}
.title {
	display: flex;
	align-items: center;
	font-weight: 700;
	height: 80rpx;
	.goback {
		image {
			margin-left: 50rpx;
			width: 20rpx;
			height: 30rpx;
		}
	}
	text {
		flex: 1;
		margin-right: 50rpx;
		font-size: 34rpx;
		text-align: center;
	}
}
.pt-300 {
	padding-top: 300rpx;
}
.mt-200 {
	margin-top: 200rpx;
}
</style>
